<template>
  <transition>
    <div class="app-shop-enquiry">
      <section class="app-main">
        <div class="car-img">
          <span class="module-title">选择任意一种方式识别车型</span>
          <dl class="way-list">

            <dd class="item" @click="handleOpenPopupImg">
              <span class="iconfont icon-xiangjizhuanhuan"></span>
              <span class="item-title">拍照上传</span>
            </dd>
            <dd class="item" @click="handleSelectBrand">
              <span class="iconfont icon-xiaotuziCduan-"></span>
              <span class="item-title">品牌车型</span>
            </dd>
            <dd class="item" @click="handleInputVin">
              <span class="iconfont icon-vin"><em>VIN</em></span>
              <span class="item-title">输入车架号</span>
            </dd>
          </dl>


          <mt-cell v-if="post.carModel" @click.native="handleSelectBrand" class="car-info" title="车型信息" :label="post.carModel" is-link></mt-cell>
          <mt-field v-if="selectVin==true" class="input-vin" label="车架号(VIN)" placeholder="请输入车架号(VIN)" v-model="post.vin"></mt-field>

          <!--{{files}}-->
          <div class="word-car-img" v-if="files.length>0">
            <ul class="car-repair-list">
              <li class="car-repair-item" v-for="(item,index) in files" @click="handleCheckPic">
                <img class="img" :src="item.src"/>
              </li>
            </ul>
          </div>
        </div>
        <div class="module-select-position">
          <div class="module-title">选择配件类型和位置</div>
          <div class="module-body">
            <ul class="position-list">
              <li class="position-item" v-for="item in myposition.checkoptions">
                <input :id="item.id" class="check-position" type="checkbox" v-model="item.isCheck"><label :for="item.id" class="">{{item.label}}</label>
                <dl class="type-list">
                  <dd class="type-item" v-for="i in item.brand">
                    <input :id="i.id" class="check-position" type="checkbox" v-model="i.isBrandCheck"><label :for="i.id" class="label-brand">{{i.label}}</label>
                  </dd>
                </dl>
                <dl class="type-item-details" v-if="item.label=='侧窗'">
                  <dd class="item-block">
                    左侧第<input type="number" v-model="item.side[0].number" class="input-text">片，
                  </dd>
                  <dd class="item-block">
                    右侧第<input type="number" v-model="item.side[1].number" class="input-text">片
                  </dd>
                </dl>
              </li>
            </ul>
          </div>
        </div>
        <div class="module-store-info">
          <span class="module-title">备注信息</span>
          <textarea v-model="post.comments" class="item-textarea" placeholder="请输入备注信息" oninput="this.style.height=this.scrollHeight + 'px'"></textarea>
        </div>
        <div class="module-store-info">
          <span class="module-title">填写门店信息</span>
          <mt-field label="联系人" placeholder="请输入联系人" v-model="post.linkMan"></mt-field>
          <mt-field label="联系电话" placeholder="请输入联系电话" v-model="post.linkPhone"></mt-field>
          <mt-field label="作业地点" placeholder="请输入作业地点" v-model="post.address"><span class="iconfont icon-didian1" @click="handleSelectAddress"></span></mt-field>
        </div>
        <div class="button-content">
          <mt-button type="danger" @click="handlePost">确认修改</mt-button>
        </div>
      </section>


      <!--弹窗-上传车辆照片-->
      <mt-popup
        v-model="popupCarImg"
        position="right"
        class="popup-car-img">
        <upload-img @uploadsData="getUploads" @filesData="getFiles" @popupClose="handleClose"></upload-img>
      </mt-popup>
      <!--地图弹窗-->
      <mt-popup
        v-model="popupMap"
        position="right" class="popup-map">
        <map-select v-if="isSelectMap" @mapData="getMapData" @mapClose="handleMapClose"></map-select>
      </mt-popup>
      <!--地图弹窗-->
      <!--品牌车型弹窗-->
      <mt-popup
        v-model="popupBrandList"
        position="right" class="popup-car-img">
        <brand-list @brandData="getBrandData"></brand-list>
      </mt-popup>
      <!--品牌车型弹窗-->
      <mt-popup
      v-model="popupVin"
      position="right"
      class="popupResult">
      <div class="module-vin">
        <mt-field label="请输入车架号" placeholder="请输入vin码" v-model="post.vin"></mt-field>
        <div class="button-content">
          <mt-button type="danger" @click="handleResolveVin">识别</mt-button>
        </div>
      </div>
    </mt-popup>

      <!--图片大图弹窗-->
      <mt-popup
        v-model="popupSwiper"
        position="middle" class="me-popup-pic">
        <popup-swiper v-bind:picList="files" @popupSwiperClose="handleCloseSwiper"></popup-swiper>
      </mt-popup>
      <!--图片大图弹窗-->
    </div>
  </transition>
</template>

<script>
  import {Button,Field,Popup,Toast,TabContainer, TabContainerItem,Indicator} from 'mint-ui';
  import popupSwiper from '../common/popup-swiper';
  //  Vue.component(Header.name, Header);

  import uploadImg from '../common/upload-img';
  import mapSelect from '../common/map-select';
  import brandList from '../common/brand-list';
  export default {
    components:{
      uploadImg,
      mapSelect,
      brandList,
      popupSwiper
    },
    data () {
      return {
        res:'',
        files:[],
        client: '',
        popupSwiper:false,
        selectVin:false,
        myposition :{
          selectSide:false,
          checkoptions:[
            {
              id:1,
              label: '前挡',
              partLocate: 'F',
              isCheck:false,
              brand:[
                {
                  id:'brand1',
                  partType:'0',
                  label: '原厂件',
                  isBrandCheck:false,
                },
                {
                  id:'brand2',
                  partType:'1',
                  label: '品牌件',
                  isBrandCheck:false,
                }
              ]
            },
            {
              id:2,
              label: '后挡',
              partLocate: 'B',
              isCheck:false,
              brand:[
                {
                  id:'brand3',
                  partType:'0',
                  label: '原厂件',
                  isBrandCheck:false,
                },
                {
                  id:'brand4',
                  partType:'1',
                  label: '品牌件',
                  isBrandCheck:false,
                }
              ]
            },
            {
              id:3,
              label: '天窗',
              partLocate: 'T',
              isCheck:false,
              brand:[
                {
                  id:'brand5',
                  label: '原厂件',
                  partType:'0',
                  isBrandCheck:false,
                },
                {
                  id:'brand6',
                  label: '品牌件',
                  partType:'1',
                  isBrandCheck:false,
                }
              ]
            },
            {
              id:4,
              label: '侧窗',
              isCheck:false,
              brand:[
                {
                  id:'brand7',
                  label: '原厂件',
                  partType:'0',
                  isBrandCheck:false,
                },
                {
                  id:'brand8',
                  label: '品牌件',
                  partType:'1',
                  isBrandCheck:false,
                }
              ],
              side:[{
                label: '左侧',
                partLocate:'L',
                number:''
              },{
                label: '右侧',
                partLocate:'R',
                number:''
              }],
            }]
        } ,
        popupVin:false,
        haveModel:false,
        hasResult:false,
        popupBrandList:false,
        selectedType:'1',
        showNextButton:false,
        popupCarImg:false,
        popupMap:false,
        userlocation: {lng: "", lat: ""},
        isSelectMap:false,
        testAttr:[],
        post:{
          id:'',
          uploads:[],
          linkMan:'',
          linkPhone:'',
          address:'',
          demandType:2,
          demandSource:1,
          applyShopName:'',
          applyCustomTypeName:'第三方',
          applyCustomName:'',
          carModel:'',
          vin:'',
          parts:[],
        }
      }
    },
    mounted(){
      if(this.$route.query.carModel){
        this.post.carModel=this.$route.query.carModel;
      };
      this.getData();




    },
    watch:{},
    methods:{

      getData() {

        this.files=[];
        /**获取门店数据**/
        var params = new URLSearchParams();
        params.append('demandId',this.$route.query.id);
        params.append('businessType',0);
        this.$axios({
          method: 'post',
          url:'gp/declaration/demandDetails',
          data:params
        }).then((res)=>{
          if(res.data.statusCode==200){
          this.res=res.data.object;
          console.log(res)

          this.post.linkMan=this.res.linkMan;
          this.post.linkPhone=this.res.linkPhone;
          this.post.address=this.res.address;
          this.post.applyShopName=this.res.applyShopName;
          this.post.applyCustomName=this.res.applyCustomName;
          this.post.comments=this.res.comments;
          this.post.id=this.res.id;
          this.post.carModel=this.res.carModel;
          this.post.uploads=this.res.uploads;
          this.post.vin=this.res.vin;
          if(this.post.vin!=''){
            this.selectVin=true;
          }
          if(typeof this.res.checkOptions!=='undefined'){
            this.myposition.checkoptions=JSON.parse(this.res.checkOptions)
          }

          for(var i=0;i<this.post.uploads.length;i++){
            console.log(this.post.uploads[i],11111)
              const item = {
                id:this.post.uploads[i].id,
                name: this.post.uploads[i].sourceFileName,
                tag : this.post.uploads[i].etag,
                fileLocate:this.post.uploads[i].fileLocate,
                src: 'https://rmcbapp.oss-cn-shenzhen.aliyuncs.com/'+this.post.uploads[i].ossPath+'?x-oss-process=image/resize,m_fixed,w_500',
                serverId:'',
              }
              this.files.push(item);
          }
        }
      });
      },
      handleCheckPic(){

        this.popupSwiper=true;
      },
      handleCloseSwiper(){
        this.popupSwiper=false;
      },
      /**vin码查询弹窗**/
      handleInputVin(){
//        this.popupVin=true;

        if(this.storeType==1){
          MessageBox.alert('您的账号身份为汽车玻璃服务门店，请返回登录汽修厂账号或申请新的汽修厂账号',).then(action => {
            if(action=='confirm'){
            this.$router.push({path:'/login'})
          }
        });
          return false;
        }
        this.selectVin=true;
      },
      handleSelectBrand(){

        if(this.storeType==1){
          MessageBox.alert('您的账号身份为汽车玻璃服务门店，请返回登录汽修厂账号或申请新的汽修厂账号',).then(action => {
            if(action=='confirm'){
            this.$router.push({path:'/login'})
          }
        });
          return false;
        }
        this.popupBrandList=true;
      },
      getBrandData(data){
        this.post.carModel=data;
        this.popupBrandList=false;
      },
      /**vin码查询弹窗按钮**/
      handleResolveVin(){

        if(this.post.vin.length!==17){
          Toast({
            message: '请输入17位数的车架号',
            position: 'middle',
            duration:1000
          });
          return false;
        }


        Toast({
          message: '识别成功',
          position: 'middle',
          duration:800
        });
        this.popupVin=false;
        var params = new URLSearchParams();
        params.append('post.vin', this.post.vin);
        this.$axios({
          method: 'post',
          url:'gp/',
          data:params
        }).then((res)=>{
          if(res.data.statusCode==200){
          Toast({
            message: res.data.message,
            position: 'middle',
            duration:1500
          });
        }else{
          Toast({
            message: res.data.message,
            position: 'middle',
            duration:1000
          });
          return false;
        }
      });

      },

      /**提交询价表单**/
      handlePost(){


        if(this.storeType==1){
          MessageBox.alert('您的账号身份为汽车玻璃服务门店，请返回登录汽修厂账号或申请新的汽修厂账号',).then(action => {
            if(action=='confirm'){
            this.$router.push({path:'/login'})
          }
        });
          return false;
        }
        this.post.parts=[];
        this.testAttr=[];
        for(var i=0;i<this.myposition.checkoptions.length;i++){
          /**判断是否选择了位置**/
          if(this.myposition.checkoptions[i].isCheck==true){

            var indexAttr=this.myposition.checkoptions[i];
            for(var j=0;j<indexAttr.brand.length;j++){

              /**判断是否选择了品牌**/
              if(indexAttr.brand[j].isBrandCheck==true){
                if(indexAttr.label=='侧窗'){

                  for(var h=0;h<indexAttr.side.length;h++){

                    /**判断是否输入了左右两侧的玻璃**/
                    if(indexAttr.side[h].number!==''){

                      /**生成列表**/
                      const item={};
                      item.remark=indexAttr.label+indexAttr.side[h].label+'第'+indexAttr.side[h].number+'片';
                      item.brand=indexAttr.brand[j].label;
                      item.partType=indexAttr.brand[j].partType;
                      item.partLocate=indexAttr.side[h].partLocate+indexAttr.side[h].number;
                      item.qty='1';
                      item.fromCustomer=true;
                      item.isChoose=1;
                      item.stock=false;
                      item.partType=indexAttr.brand[j].partType;
                      this.post.parts.push(item);
                      this.testAttr.push(indexAttr.label)
                    }
                  }
                }else{
                  /**生成列表**/
                  const item={};
                  item.remark=indexAttr.label;
                  item.brand=indexAttr.brand[j].label;
                  item.partType=indexAttr.brand[j].partType;
                  item.partLocate=indexAttr.partLocate;
                  item.qty='1';
                  item.fromCustomer=true;
                  item.isChoose=1;
                  item.stock=false;
                  this.post.parts.push(item);
                  this.testAttr.push(indexAttr.label)
                }
              }
            }
          }
        }
        if(this.post.parts<=0){
          Toast({
            message: '请选择配件类型和位置',
            position: 'middle',
            duration:1000
          });
          return false;
        }
        for(var i=0;i<this.myposition.checkoptions.length;i++){
          /**判断是否选择了位置**/
          if(this.myposition.checkoptions[i].isCheck==true){
            if(this.testAttr.indexOf(this.myposition.checkoptions[i].label)!=-1){
              console.log('存在')
            }else{
              Toast({
                message: '请选择'+this.myposition.checkoptions[i].label+'的配件类型',
                position: 'middle',
                duration:1000
              });
              return false;
            }
          }
        }
        if(this.post.linkMan=='' || this.post.linkPhone=='' || this.post.address==''){
          Toast({
            message: '请输入门店信息',
            position: 'middle',
            duration:1000
          });
          return false;
        }
        this.post.checkoptions=this.myposition.checkoptions;
        Indicator.open({
          text: '提交中...',
          spinnerType: 'snake'
        });
        var params = new URLSearchParams();
        params.append('demandSource',this.res.demandSource);
        params.append('demandId',this.res.id);
        params.append('demandData',JSON.stringify(this.post));
        this.$axios({
          method: 'post',
          url:'gp/declaration/sendDemand',
          data:params
        }).then((res)=>{

          Indicator.close();
          console.log(res)
        if(res.data.statusCode==200){
          this.$router.push({path:'/report-order-details',query: {id:this.res.id}})
          console.log(res)
        }else{
          Toast({
            message: res.data.message,
            position: 'middle',
            duration:1000
          });
        }
      });
      },
      handleOpenPopupImg(){

        if(this.storeType==1){
          MessageBox.alert('您的账号身份为汽车玻璃服务门店，请返回登录汽修厂账号或申请新的汽修厂账号',).then(action => {
            if(action=='confirm'){
            this.$router.push({path:'/login'})
          }
        });
          return false;
        }
        this.popupCarImg=true;
      },
      getUploads(data){

        this.post.uploads=data;
        console.log(data)
      },
      getFiles(data){
        this.files=data;
      },
      handleClose(){
        this.popupCarImg=false;
      },
      handleSelectAddress(){
        this.popupMap=true;
        this.isSelectMap=true;
      },
      handleMapClose(){
        this.popupMap=false;
      },
      getMapData(data){
        console.log(data)
        this.post.address=data.address;
        this.post.xAxis=data.xAxis;
        this.post.yAxis=data.yAxis;
      },
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style>
  .app-shop-enquiry{
    overflow: hidden;
  }
  .app-shop-enquiry .item-textarea{
    height:120px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    border: 0;
    outline: 0;
    font-size: 16px;
    padding:6px 16px;
    width: 100%;
  }

  .add-img{
    display: block;
    padding:22px 0 0;
    height: 100px;
    text-align: center;
    color: #888;
  }
  .add-img:before{
    display: block;
    margin:0 auto 4px;
    font-size:32px;
  }
  .app-shop-enquiry .img-note{
    padding: 0  0 14px;
    color: #c34853;
  }

  .app-shop-enquiry .module-note .mint-field-core{
    height:130px;
  }
  .app-shop-enquiry .label-brand{
    background: #ccc;
    padding:6px 12px;
    color:#fff;
    font-size: 14px;
    border-radius:6px
  }
  .app-shop-enquiry  .check-position{
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    margin-right:10px;
  }
  .app-shop-enquiry .position-item{
    padding:12px 18px;
    font-size: 16px;
  }
  .app-shop-enquiry .type-item{
    display: inline-block;
    margin: 0 16px 0 0;
  }
  .app-shop-enquiry .type-item .check-position{
    display: none;
  }
  .app-shop-enquiry .type-item .check-position:checked ~.label-brand{
    background:#c34853;
  }
  .app-shop-enquiry .type-list{
    background: #fff;
    display: none;
    margin: 0;
    padding:12px 32px 0;
  }
  .app-shop-enquiry .type-item-details{
    display: none;
    margin: 0;
    padding:18px 0 0 24px;
    font-size: 16px;
  }
  .check-position:checked ~.type-list,.check-position:checked ~.type-item-details{
    display: block;
  }
  .mint-toast{
    z-index:3000 !important;
  }
  .app-shop-enquiry .car-info{
    border-top:1px solid #ddd;
    padding:0 24px;
  }
  .app-shop-enquiry .car-info .mint-cell-wrapper{
    background:none;
    padding:16px 0;
  }
  .app-shop-enquiry .car-info .mint-cell-text{
    font-size: 13px;
    color: #888;
  }
  .app-shop-enquiry .car-info .mint-cell-label{
    margin:10px 0 0;
    font-size: 16px;
    color: #000;
  }
  .app-shop-enquiry .car-info .mint-cell-allow-right:after{
    width: 10px;
    height: 10px;
  }
  .app-shop-enquiry .popupResult{
    width: 100%;
    height: 100%;
    overflow: auto;
  }
  .app-shop-enquiry .img-upload-content{
    padding:20px 10px 8px;
  }
  .app-shop-enquiry .img-upload-content .item{
    position: relative;
    height: 100px;
    padding:0 10px;
    margin:0 0 20px;
  }
  .app-shop-enquiry .img-upload-content .item-add{
    border:1px dashed #ddd;
  }
  .app-shop-enquiry .img-upload-content img{
    width: 100%;
    height: 100px;
  }
  .app-shop-enquiry .img-show-small .item{
    height: 60px;
  }
  .app-shop-enquiry .img-show-small img{
    width: 100%;
    height: 60px;
  }
  .app-shop-enquiry .img-upload-content .icon-shanchu{
    background: #c34853;
    position: absolute;
    top:-12px;
    right:2px;
    width: 24px;
    height: 24px;
    border-radius:50%;
    font-size: 20px;
    color:#fff;
    text-align: center;
    line-height: 28px;
  }
  .icon-delete:before{
    position: relative;
    top: -4px;
    content:'-';
    font-size: 24px;
  }
  .app-shop-enquiry .img-upload-content .item-add .icon-jiahao{
    display: block;
    height: 100px;
    font-size: 50px;
    color: #ddd;
    line-height: 100px;
    text-align: center;
    border:1px dashed #ddd;
  }
  .app-shop-enquiry .popupResult .button-content{
    padding:32px 24px ;
  }
  .app-shop-enquiry .way-list{
    background: #fff;
    padding:16px 0;
    font-size: 0;
  }
  .app-shop-enquiry .way-list .item{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 33.3%;
    margin: 0;
    font-size: 13px;
    text-align: center;
  }
  .app-shop-enquiry .way-list .iconfont{
    background: #c34853;
    display: block;
    width: 40px;
    height: 40px;
    margin:0 auto 4px;
    border-radius:50%;
    font-size: 20px;
    color:#fff;
    line-height: 40px;
    text-align: center;
  }
  .app-shop-enquiry .app-main{
    padding:0 0 16px;
  }
  .app-shop-enquiry .module-title{
    background-color:#f5f5f5;
    display: block;
    padding:14px 12px 10px;
    font-size:16px;
  }
  .app-shop-enquiry .module-title:before{
    background:#c34853;
    position: relative;
    top:-2px;
    display:inline-block;
    vertical-align: middle;
    width:2px;
    height:16px;
    content: '';
    margin-right:4px;
  }
  .module-select-position{
    background: #fff;
    padding:0 0 18px;
  }
  .app-shop-enquiry .input-text{
    position: relative;
    top: -2px;
    margin:0 6px;
    width:50px;
    padding:5px 8px;
    font-size:16px;
    border: 1px solid #ccc;
    outline: none;
    color: #333;
    text-align: center;
    border-radius: 4px;
  }
  .app-shop-enquiry .item-block{
    display: inline-block;
    vertical-align: middle;
    padding-right:6px;
    margin: 0;
  }

  .app-shop-enquiry .bg-upload {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.5);
    text-align: center;
    color: #fff;
    padding:80px 0 0;
  }
  .app-shop-enquiry .input-upload {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    opacity: 0;
    font-size: 0;
    width: 100%;
  }
  .app-shop-enquiry .button-content{
    padding:24px ;
  }
  .app-shop-enquiry .button-content .mint-button{
    font-size: 16px;
  }

  .app-shop-enquiry .button-content .mint-button--normal{
    display: block;
    width: 100%;
  }
  .app-shop-enquiry .photo-tips{
    padding:8px 0 0;
    font-size: 12px;
    color:#fff
  }
  .app-shop-enquiry .mint-checklist-title{
    margin: 0;
  }

  .app-shop-enquiry .popup-car-img{
    width:92% !important;
    height: 100%;
    overflow: auto;
  }
  .app-shop-enquiry .popup-car-img .button-content .mint-button--normal{
    width: 100%;
    margin: 0;
  }

  .app-shop-enquiry .word-car-img .car-repair-list{
    display: flex;
    margin:0 -6px;
    overflow: auto;
    padding:12px 0 0;
  }
  .app-shop-enquiry .word-car-img .car-repair-item{
    display: flex;
    flex:1;
    width:27%;
    min-width:27%;
    max-width:27%;
    padding:0 6px;
  }
  .app-shop-enquiry .word-car-img .car-repair-item img{
    width:100%;
    height:80px;
  }
  .app-shop-enquiry .icon-didian1{
    display: inline-block;
    width: 32px;
    font-size:22px;
    color:#ef4f4f;
    text-align: center;
  }
  .app-shop-enquiry .popup-map{
    width: 100%;
    height: 100%;
  }
  .app-shop-enquiry .input-vin .mint-cell-wrapper{
    padding:0 24px;
  }

  .app-shop-enquiry .me-popup-pic{
    width: 100%;
    height:100%;
  }
  .app-shop-enquiry .me-popup-pic .mint-swipe,.app-shop-enquiry .me-popup-pic .mint-swipe-items-wrap{
    height: 100% !important;
  }
</style>
